<template>
  <div class="flex flex-col h-full">
    <!-- 表格部分 -->
    <div class="flex-1 overflow-auto">
      <el-table
        ref="tableRef"
        :data="warningData"
        style="width: 100%"
        border
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column
          prop="batteryPackSN"
          label="Battery Pack SN"
          min-width="180"
        />
        <el-table-column prop="deviceSN" label="Device SN" min-width="180" />
        <el-table-column prop="alertName" label="Alert Name" min-width="200" />
        <el-table-column label="Status" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'Open' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="batteryType"
          label="Battery Type"
          min-width="150"
        />
        <el-table-column prop="capacity" label="Capacity (kWh)" width="120" />
        <el-table-column prop="occurrenceTime" label="Occ" min-width="180" />
        <el-table-column
          label="Operate"
          width="160"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <div class="flex items-center space-x-2">
              <el-button type="primary" link>
                <!-- {{ scope.row.status === "Open" ? "Close" : "Close" }} -->
                Close
              </el-button>
              <el-button type="primary" link @click="handleDetail(scope.row)">
                Details
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="flex items-center justify-end p-4">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        background
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ElTable } from "element-plus";
import type { EarlyWarningItem } from "../data";

const props = defineProps({
  warningData: {
    type: Array as () => EarlyWarningItem[],
    required: true,
    default: () => []
  },
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 0,
      currentPage: 1,
      pageSize: 10
    })
  }
});

const emit = defineEmits(["detail", "page-change", "size-change"]);

// 本地当前页引用，用于v-model绑定
const currentPage = ref(props.pagination.currentPage);
const pageSize = ref(props.pagination.pageSize);

// 监听props中的currentPage和pageSize变化，同步到本地
watch(
  () => props.pagination.currentPage,
  newVal => {
    currentPage.value = newVal;
  }
);

watch(
  () => props.pagination.pageSize,
  newVal => {
    pageSize.value = newVal;
  }
);

const handlePageChange = (page: number) => {
  emit("page-change", page);
};

const handleSizeChange = (size: number) => {
  emit("size-change", size);
};

const handleDetail = (row: EarlyWarningItem) => {
  emit("detail", row);
};

// 表格引用
const tableRef = ref<typeof ElTable | null>(null);
</script>

<style scoped lang="scss">
/* 调整分页组件样式 */
:deep(.el-pagination) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 取消分页器非活跃按钮的背景色 */
:deep(.el-pagination .el-pager li) {
  background-color: transparent;
}

/* 设置表格头部样式 */
:deep(.el-table th.el-table__cell) {
  background-color: #f5f7fa;
  color: #606266;
}
</style>
